<ion-header>
  <ion-toolbar>
    <ion-title>Updates</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="with-widgets">
  <ion-item-group *ngIf="data$ | async as data">
    <div *ngFor="let host of data.hosts">
      <ion-item-divider class="inline">
        <store-icon [url]="host.url" size="26px"></store-icon>
        &nbsp;
        <span style="padding-left: 8px; letter-spacing: 0.7px; font-size: 20px">
          {{ host.name }}
        </span>
      </ion-item-divider>

      <ion-item *ngIf="data.errors.includes(host.url)">
        <ion-text color="danger">Request Failed</ion-text>
      </ion-item>

      <ng-container
        *ngIf="data.marketplace[host.url]?.packages as packages else loading"
      >
        <ng-container
          *ngIf="packages | filterUpdates : data.localPkgs as updates"
        >
          <ion-accordion-group multiple="true" class="ion-padding-start">
            <div *ngFor="let pkg of updates" class="item-container">
              <ion-accordion *ngIf="data.localPkgs[pkg.manifest.id] as local">
                <ion-item lines="none" slot="header">
                  <ion-avatar slot="start" style="width: 50px; height: 50px">
                    <img [src]="pkg | mimeType | trustUrl" />
                  </ion-avatar>
                  <ion-label>
                    <h1 style="line-height: 1.3">{{ pkg.manifest.title }}</h1>
                    <h2 class="inline">
                      <span>
                        {{ local.installed?.manifest?.version || '' |
                        displayEmver }}
                      </span>
                      &nbsp;
                      <ion-icon name="arrow-forward"></ion-icon>
                      &nbsp;
                      <ion-text color="success">
                        {{ pkg.manifest.version | displayEmver }}
                      </ion-text>
                    </h2>
                    <p
                      *ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
                    >
                      <ion-text color="danger">{{ error }}</ion-text>
                    </p>
                  </ion-label>
                  <div slot="end" style="margin-left: 4px">
                    <round-progress
                      *ngIf="local.state === 'updating' else notUpdating"
                      [current]="local['install-progress'] | installProgress"
                      [max]="100"
                      [radius]="13"
                      [stroke]="3"
                      [rounded]="true"
                      color="var(--ion-color-primary)"
                    ></round-progress>
                    <ng-template #notUpdating>
                      <ion-spinner
                        *ngIf="marketplaceService.updateQueue[pkg.manifest.id] else updateBtn"
                        color="dark"
                      ></ion-spinner>
                      <ng-template #updateBtn>
                        <ion-button
                          (click)="tryUpdate(pkg.manifest, host.url, local, $event)"
                          [color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'tertiary'"
                          strong
                        >
                          {{ marketplaceService.updateErrors[pkg.manifest.id] ?
                          'Retry' : 'Update' }}
                        </ion-button>
                      </ng-template>
                    </ng-template>
                  </div>
                </ion-item>
                <div class="ion-padding" slot="content">
                  <div class="notes">
                    <h5>What's new</h5>
                    <p
                      [innerHTML]="pkg.manifest['release-notes'] | markdown"
                    ></p>
                  </div>
                  <ion-button
                    fill="clear"
                    strong
                    (click)="viewInMarketplace($event, host.url, pkg.manifest.id)"
                  >
                    View listing
                    <ion-icon slot="end" name="open-outline"></ion-icon>
                  </ion-button>
                </div>
              </ion-accordion>
            </div>
          </ion-accordion-group>
          <ion-item
            *ngIf="!updates.length"
            class="ion-text-center ion-padding"
            lines="none"
          >
            <ion-label>All services are up to date!</ion-label>
          </ion-item>
        </ng-container>
      </ng-container>

      <ng-template #loading>
        <div class="ion-padding">
          <skeleton-list [showAvatar]="true" [rows]="2"></skeleton-list>
        </div>
      </ng-template>
    </div>
  </ion-item-group>
</ion-content>
